<template>
  <h2>Style 默认样式说明</h2>
  <h3>纯色</h3>
  <p>import { pureColor } from 'ui-lib/components/chart/style'</p>
  <ColorBar type="pure" :colors="pureColor"></ColorBar>
  <h3>渐变色</h3>
  <p>import { gradientColor } from 'ui-lib/components/chart/style'</p>
  <ColorBar type="gradient" :colors="gradientColor"></ColorBar>
  <h3>Grid 网格</h3>
  <table-info type="config" :data="grid"></table-info>
  <h3>Axis</h3>
  <table-info type="config" :data="axis"></table-info>
  <h3>xAxis</h3>
  <table-info type="config" :data="xAxis"></table-info>
  <h3>yAxis</h3>
  <table-info type="config" :data="yAxis"></table-info>
  <h3>Name 轴名称</h3>
  <table-info type="config" :data="name"></table-info>
  <h3>Legend 图例</h3>
  <table-info type="config" :data="legend"></table-info>
  <h3>Line 折线图</h3>
  <table-info type="config" :data="line"></table-info>
  <h3>Bar 柱状图</h3>
  <table-info type="config" :data="bar"></table-info>
  <h3>Ring 环形图</h3>
  <table-info type="config" :data="ring"></table-info>
</template>

<script setup>
import ColorBar from './color-bar.vue'
import { pureColor, gradientColor } from 'ui-lib/components/chart/style'

const grid = [
  {
    name: 'gridContainLabel',
    desc: '绘图网格是否包含坐标系标签',
    type: 'boolean',
    value: 'false',
  },
  {
    name: 'gridLeft',
    desc: '绘图网格距离容器左侧的距离',
    type: 'number',
    value: '30',
  },
  {
    name: 'gridRight',
    desc: '绘图网格距离容器右侧的距离',
    type: 'number',
    value: '40',
  },
  {
    name: 'gridTop',
    desc: '绘图网格距离容器上侧的距离',
    type: 'number',
    value: '84',
  },
  {
    name: 'gridBottom',
    desc: '绘图网格距离容器下侧的距离',
    type: 'number',
    value: '0',
  },
]

const axis = [
  {
    name: 'axisLineColor',
    desc: '轴线颜色，包括刻度',
    type: 'string',
    value: '#616998',
  },
  {
    name: 'axisPointerColor',
    desc: '坐标轴指示器颜色',
    type: 'string',
    value: '#999',
  },
]

const xAxis = [
  {
    name: 'xAxisLabelColor',
    desc: 'x轴文字颜色',
    type: 'string',
    value: '#27243F',
  },
  {
    name: 'xAxisLabelFontSize',
    desc: 'x轴文字大小',
    type: 'number',
    value: '16',
  },
  {
    name: 'xAxisLabelMargin',
    desc: 'x轴文字距离刻度的距离',
    type: 'number',
    value: '15',
  },
]
const yAxis = [
  {
    name: 'yAxisLabelColor',
    desc: 'y轴文字颜色',
    type: 'string',
    value: '#616998',
  },
  {
    name: 'yAxisLabelFontSize',
    desc: 'y轴文字大小',
    type: 'number',
    value: '14',
  },
  {
    name: 'yAxisLabelLineHeight',
    desc: 'y轴文字行高',
    type: 'number',
    value: '20',
  },
  {
    name: 'yAxisSplitLineType',
    desc: 'y轴分割线的类型',
    type: 'string',
    value: 'dash',
  },
  {
    name: 'yAxisSplitLineColor',
    desc: 'y轴分割线的颜色',
    type: 'string',
    value: '#eff1f5',
  },
  {
    name: 'yAxisLabelMargin',
    desc: 'y轴文字距离刻度的距离',
    type: 'number',
    value: '16',
  },
]

const name = [
  {
    name: 'nameColor',
    desc: '坐标轴名称的颜色',
    type: 'string',
    value: '#27243F',
  },
  {
    name: 'nameFontSize',
    desc: '坐标轴名称的字体大小',
    type: 'number',
    value: '14',
  },
]

const legend = [
  { name: 'legendGap', desc: '图例间距', type: 'number', value: '24' },
  { name: 'legendTop', desc: '图例上边距', type: 'number', value: '0' },
  {
    name: 'legendFontSize',
    desc: '图例的文字大小',
    type: 'number',
    value: '14',
  },
  {
    name: '图例的高度',
    desc: '图例的文字大小',
    type: 'number',
    value: '18',
  },
  {
    name: 'legendFontColor',
    desc: '图例的文字颜色',
    type: 'string',
    value: '#27243F',
  },
  {
    name: 'legendCircleSize',
    desc: '圆形图例的直径',
    type: 'number',
    value: '14',
  },
  {
    name: 'legendRectWidth',
    desc: '矩形图例的宽',
    type: 'number',
    value: '18',
  },
  {
    name: 'legendRectHeight',
    desc: '矩形图例的高',
    type: 'number',
    value: '9',
  },
]

const line = [
  { name: 'lineWidth', desc: '折线图的线条粗细', type: 'number', value: '3' },
  {
    name: 'lineCircelSize',
    desc: '折线图圆形标记的大小',
    type: 'number',
    value: '10',
  },
  {
    name: 'lineCircelBorderWidth',
    desc: '折线图圆形标记的边框粗细',
    type: 'number',
    value: '2',
  },
  {
    name: 'lineCircelBorderColor',
    desc: '折线图圆形标记的边框颜色',
    type: 'string',
    value: '#fff',
  },
]

const bar = [
  { name: 'barWidth', desc: '柱状图的柱宽度', type: 'number', value: '22' },
  {
    name: 'barGap',
    desc: '柱状图的柱间距，为柱宽度的百分比',
    type: 'string',
    value: '18%',
  },
  {
    name: 'barBorderRadius',
    desc: '柱状图的柱圆角',
    type: 'Array',
    value: '8',
  },
]
const ring = [
  { name: 'ringWidth', desc: '环图粗细', type: 'number', value: '22' },
]
</script>
